<template>
  <div class="drawing-container">
    <div id="tui-image-editor"></div>
<!--    <el-button class="save" type="primary" size="small" >下载</el-button>-->
  </div>
</template>
<script>
import "tui-image-editor/dist/tui-image-editor.css";
import "tui-color-picker/dist/tui-color-picker.css";
import ImageEditor from "tui-image-editor";
import {TUI_IMAGE_LOCALE, TUI_IMAGE_CUSTOM_THEME} from '@/views/other/tui-image-locale'

export default {
  name: 'ImageEdit',
  data() {
    return {
      instance: null,
      logoImage: require('@/assets/images/logo-image.jpg')
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.instance = new ImageEditor(
        document.querySelector("#tui-image-editor"),
        {
          includeUI: {
            loadImage: {
              path: this.logoImage,
              name: "image",
            },
            initMenu: "draw", // 默认打开的菜单项
            menuBarPosition: "bottom", // 菜单所在的位置
            locale: TUI_IMAGE_LOCALE,
            theme: TUI_IMAGE_CUSTOM_THEME
          },
          cssMaxWidth: 1000, // canvas 最大宽度
          cssMaxHeight: 600, // canvas 最大高度

        }
      );
      document.getElementsByClassName("tui-image-editor-main")[0].style.top = "45px"; // 图片距顶部工具栏的距离
    },
    // 保存图片，并上传
    save() {
      const base64String = this.instance.toDataURL(); // base64 文件
      const data = window.atob(base64String.split(",")[1]);
      const ia = new Uint8Array(data.length);
      for (let i = 0; i < data.length; i++) {
        ia[i] = data.charCodeAt(i);
      }
      const blob = new Blob([ia], { type: "image/png" }); // blob 文件
      const form = new FormData();
      form.append("image", blob);
      // upload file
    },

  }
}
</script>
<style scoped lang="scss">
.drawing-container {
  height: calc(100vh - 84px);
  position: relative;

  .save{
    position: absolute;
    right: 50px;
    top: 15px;
  }
}

</style>
